<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>kongtiao</title>
    <style type="text/css">
.box1{
        width:  200px;
        height: 400px;
        border: 2px solid;
        padding: 5px;
        margin: 5px;
		left:25%;
		top:20%;
		position:absolute; 
}
.box2{
	
	width:170px;
	height:170px;
	margin-left:15px;
	margin-top:20px;
	background-color: #CCCCCC;
	position:absolute;
}
.tu01{
	
	 width:36px;
	height:31px;
	margin-top:80px;
	margin-left:20px;
	position:absolute;
}
.tu02{
	
	width:36px;
	height:31px;
	margin-top:80px;
	margin-left:110px;
	
	position:absolute;
	
}
.upstair{
  
     width:200px;
	height:180px;
	top:55%;
	position:absolute;

}
.box3{
	
	width:90px;
	height:30px;
	margin-top:50px;
	margin-left:5px;
	position:absolute;

}
.cold{
	width:90px;
	height:30px;
	font-size: 20px;
    font-weight: 400; 	
}
.hot{
	width:90px;
	height:30px;
	font-size: 20px;
    font-weight: 400; 	
}
.box4{
	
	width:90px;
	height:30px;
	margin-top:50px;
	margin-left:105px;
	position:absolute;
}
.box5{
	
	 width:36px;
	height:31px;
	margin-top:120px;
	margin-left:70px;
	
	position:absolute;
	
}



    </style>
</head>

<body style="color:gray;">
<script type="text/javascript">
    function leng(){
		document.getElementById("le").src="./img/01.png";
		document.getElementById("nu").src="./img/02.png";
		
		
	}
	 function nuan(){
		 document.getElementById("le").src="./img/07.png";
		document.getElementById("nu").src="./img/06.png";
	}
	 function clos(){
		 document.getElementById("le").src="./img/07.png";
		document.getElementById("nu").src="./img/02.png";
	}





</script>
<div class="box1">

    <div class="box2">
        <div class="tu01">
            <img src="./img/07.png" id="le"/>
        </div>
        <div class="tu02">
            <img src="./img/02.png" id="nu"/>
        </div>

    </div>
    <div class="upstair">
        <div class="box3">
            <input type="button" class="cold" value="冷风" onclick="leng()"/>
        </div>
        <div class="box4">
            <input type="button" class="hot" value="暖风" onclick="nuan()"/></div>
        <div class="box5">
            <button id="guan" onclick="clos()"><img src="./img/03.png"/></button>
        </div>
    </div>
</div>
</body>
</html>
